<template>
	<view class="content bod-t">
		<view class="warpper">
			<view>
			</view>
			<view class="address-cell" v-for="item in addressList" :key="item.id">
				<address-item :showDel="true" :addressInfo="item" @eventClick="edit" @onSuccess="changeSuccess" @itemClick="checkAddress(item)"></address-item>
			</view>
		</view>
		<uni-load-more :status="loadStatus"></uni-load-more>
		<button class="add-address-btn" @click="addAddress">
			<uni-icons class="add-icon" color="#2962FF" type="plusempty" size="20" />ADD ADDRESS
		</button>
	</view>
</template>

<script>
	import addressItem from '@/components/mix-address-item.vue';
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	export default {
		components: {
			addressItem,
			uniIcons,
			uniLoadMore
		},
		data() {
			return {
				source: 0,
				addressList: [],
				loadStatus: 'noMore',
				pageInfo: {
					page: 1,	// 当前页
					limit: 10, // 每页显示数量
				}
			}
		},
		onLoad(option){
			this.source = option.source;
		},
		onShow() {
			this.initData()
		},
		// 页面下拉到底部触发
		onReachBottom () {
			if (this.loadStatus == 'more') {
				this.loadData()
			}
		},
		methods: {
			initData() {
				this.pageInfo.page = 1
				this.addressList = []
				this.loadData()
			},
			loadData() {
				let data = {
					page: this.pageInfo.page,
					per_page: this.pageInfo.limit
				}
				let _this = this
				this.$api.addressList(data, res => {
					if(res.code === 1) {
						let list = res.data.data || [];
						_this.addressList = [..._this.addressList, ...list]
						
						if(parseInt(res.data.current_page) < res.data.last_page) {
							_this.pageInfo.page++
							_this.loadStatus = 'more'
						} else {
							_this.loadStatus = 'noMore'
						}
					}
				})
			},
			changeSuccess() {
				this.initData()
			},
			//选择地址
			checkAddress(item){
				if(this.source == 1){
					//this.$api.prePage()获取上一页实例，在App.vue定义
					this.$common.prePage().addressData = item;
					uni.navigateBack()
				}
			},
			// addAddress(type, item){
			// 	uni.navigateTo({
			// 		url: `/pages/address/addressManage?type=${type}&data=${JSON.stringify(item)}`
			// 	})
			// },
			//添加或修改成功之后回调
			refreshList(data, type){
				//添加或修改后事件，这里直接在最前面添加了一条数据，实际应用中直接刷新地址列表即可
				this.addressList.unshift(data);
				
				console.log(data, type);
			},
			addAddress() {
				this.$common.navigateTo('addAddress')
			},
			edit(e) {
				this.$common.navigateTo('addAddress?id=' + e.id)
			}
		}
	}
</script>

<style lang='scss' scoped>
	page{
		padding-bottom: 120upx;
	}
	.content{
		position: relative;
		padding: 40rpx;
		.add-address-btn {
			position: fixed;
			left: 30upx;
			right: 30upx;
			bottom: 40upx;
			background-color: #fff;
			border: 2rpx solid #2962FF;
			border-radius: 8rpx;
			box-sizing: border-box;
			font-family: Roboto;
			font-weight: bold;
			color: #2962FF;
			text-transform: uppercase;
			letter-spacing: 0.6rpx;
			text-align: center;
			.add-icon {
				margin-right: 30rpx;
			}
			&::after {
				border: none;
			}
		}
		.warpper {
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.15);
			.address-cell {
				border-top: 2rpx solid rgba(0, 0, 0, 0.15);
			}
		}
	}
</style>
